﻿@page
@{ Layout = "_Layout"; }
@section Styles{
    <link href="/sitefiles/assets/lib/geeks/css/theme.min.css" rel="stylesheet" type="text/css" />
    <style>
        .el-input__inner {
            border-radius: 0;
            border-top-width: 0px;
            border-left-width: 0px;
            border-right-width: 0px;
            border-bottom-width: 2px;
            background: none;
        }
    </style>
}
<el-card>
    <div slot="header" class="clearfix">
        <span class="fw-bold fs-4">试卷预览-{{ paper.title }}（共：{{ paper.tmTotal }}题，总分：{{ paper.totalScore }}分，及格分：{{ paper.passScore }}分）</span>
        <div style="float:right;">
            <el-select v-model="curRandomId" v-on:change="selectChangeRandomConfig">
                <el-option v-for="(item,configIndex) in randomIds"
                           :key="item"
                           :value="item" :label="'第'+ (configIndex+1) +'套试卷'">
                </el-option>
            </el-select>
        </div>
    </div>
    <el-row :gutter="8">
        <el-col :span="18">
            <el-scrollbar class="scrollbar" :style="{ height: ($(window).innerHeight()-145) + 'px' }" ref="answerScrollbar">
                <div class="pe-3">
                    <div v-for="(tx,txIndex) in list">
                        <el-card>
                            <div slot="header" class="clearfix fw-bold">
                                <span>{{tx.txName}}(共{{tx.tmTotal}}题，共{{tx.scoreTotal}}分)</span>
                            </div>
                            <div>
                                <div class="mb-3" v-for="(tm,tmIndex) in tx.tmList">
                                    <el-card>
                                        <div :id="'tm_'+tm.id">
                                            <div class="mb-3 d-flex justify-content-start  align-items-start">
                                                <span>{{ tm.tmIndex }}、</span>
                                                <div v-if="tm.baseTx==='Tiankongti'">
                                                    <span v-if="tm.titleList && tm.titleList.length>0">
                                                        <span v-for="tmContent in tm.titleList">
                                                            <span v-if="utils.contains(tmContent.value,'___')">
                                                                <el-input size="small" style="width:130px;"></el-input>
                                                            </span>
                                                            <span v-else v-html="tmContent.value"></span>
                                                        </span>
                                                    </span>
                                                    <div v-else v-html="tm.titleHtml"></div>
                                                </div>
                                                <div v-else v-html="tm.titleHtml"></div>
                                                <span class="ms-auto badge text-dark px-0">({{tm.score}}分)</span>
                                            </div>
                                            <div class="list-group" v-if="tm.baseTx!=='Tiankongti' && tm.baseTx!=='Jiandati'">
                                                <div v-if="tm.baseTx==='Danxuanti' || tm.baseTx==='Panduanti'">
                                                    <div class="list-group-item list-group-item-action" v-for="(option,optionIndex) in tm.options">
                                                        <div class="d-flex justify-content-start align-items-start">
                                                            <div class="me-1 position-relative">
                                                                <span class="position-absolute top-50 start-0 translate-middle pe-3" v-if="utils.contains(utils.toCamelCase(tm.answer),utils.toCamelCase(optionsABC[optionIndex]))"><i class="el-icon-success text-success fw-bold"></i></span>
                                                                {{optionsABC[optionIndex]}}.
                                                            </div>
                                                            <div>
                                                                <span v-html="option"></span>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div v-if="tm.baseTx==='Duoxuanti'">
                                                    <div class="list-group-item list-group-item-action" v-for="(option,optionIndex) in tm.options">
                                                        <div class="d-flex justify-content-start align-items-start">
                                                            <div class="me-1 position-relative">
                                                                <span class="position-absolute top-50 start-0 translate-middle pe-3" v-if="utils.contains(utils.toCamelCase(tm.answer),utils.toCamelCase(optionsABC[optionIndex]))"><i class="el-icon-success text-success fw-bold"></i></span>
                                                                {{optionsABC[optionIndex]}}.
                                                            </div>
                                                            <div>
                                                                <span v-html="option"></span>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="d-flex justify-content-start align-items-start mt-3">
                                                <div class="me-2" style="width:60px;">答案</div>
                                                <div>
                                                    <span v-html="tm.answer"></span>
                                                </div>
                                            </div>
                                            <div class="d-flex justify-content-start align-items-center mt-3">
                                                <div class="me-2" style="width:60px;">难度</div>
                                                <div>
                                                    <el-rate v-model="tm.nandu"
                                                             disabled
                                                             text-color="#ff9900">
                                                    </el-rate>
                                                </div>
                                            </div>
                                            <div class="d-flex justify-content-start align-items-center mt-3">
                                                <div class="me-2" style="width:60px;">知识点</div>
                                                <div>
                                                    <span v-html="tm.zhishidian"></span>
                                                </div>
                                            </div>
                                            <div class="d-flex justify-content-start align-items-start mt-3">
                                                <div class="me-2" style="width:60px;">解析</div>
                                                <div>
                                                    <span v-html="tm.jiexi"></span>
                                                </div>
                                            </div>
                                        </div>
                                    </el-card>
                                </div>
                            </div>
                        </el-card>
                    </div>
                </div>
            </el-scrollbar>
        </el-col>
        <el-col :span="6">
            <el-card>
                <div slot="header" class="clearfix">
                    <span>答题卡</span>
                </div>
                <div>
                    <el-scrollbar class="scrollbar" :style="{ height: ($(window).innerHeight()-300) + 'px' }">
                        <ul class="list-group mb-1" v-for="(tx,txIndex) in list">
                            <li class="list-group-item border-0 p-1 fw-light">{{tx.txName}}</li>
                            <li class="list-group-item border-0 p-1">
                                <span v-for="(tab,index) in tx.tmList" v-on:click="tmDidScroll(tab.id)" style="margin-right:3px; margin-bottom:3px;cursor:pointer;">
                                    <el-tag :key="tab.id" size="mini" type="info" effect="plain">
                                        {{ tab.tmIndex }}
                                    </el-tag>
                                </span>
                            </li>
                        </ul>
                    </el-scrollbar>
                </div>
            </el-card>
            <div class="mt-2 text-end">
                <el-button class="btn btn-outline-success py-3 w-100" v-on:click="utils.closeLayerSelf">退出预览</el-button>
            </div>
        </el-col>
    </el-row>
</el-card>
@section Scripts{
    <script src="/sitefiles/assets/js/admin/common/examPaperLayerView.js" type="text/javascript"></script>
}